<template>
    <view>
        <!-- <back></back> -->
        <mescroll-body
            :sticky="true"
            ref="mescrollRef"
            @init="mescrollInit"
            @down="downCallback"
            @up="upCallback"
        >
            <view class="item" v-for="(item, index) in list">
                <view style="margin-bottom: 10rpx" class="u-flex u-row-between">
                    <view class="tit">{{ item.txlx }}</view>
                    <view class="money">{{ item.money }}</view>
                </view>
                <view class="u-flex u-row-between">
                    <view class="grey">{{ item.createtime }}</view>
                    <view class="grey">{{
                        status == "created" ? "申请中" : status == "successed" ? "成功" : "已拒绝"
                    }}</view>
                    <!-- :class="index>2 ?'blue':''" -->
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            list: ["", ""],
        };
    },
    methods: {
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/shop/tx_list", {
                    page: page.num,
                    limit: page.size,
                    id: this.id,
                    type: this.current > 0 ? this.current : "",
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
                    this.list = this.list.concat(res.data.data); //追加新数据
                    this.scholar = res.data.scholar;
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
    },
};
</script>

<style>
page {
    background: #fff;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.item {
    width: 92%;
    margin: 0 auto;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e1e1e1;

    .tit {
        font-size: 28rpx;
        font-weight: bold;
        color: #222;
    }

    .money {
        font-size: 28rpx;
        color: #ff6468;
    }

    .grey {
        font-size: 24rpx;
        color: #888;
    }

    .blue {
        color: #2ab1e9;
    }
}
</style>
